<template>
  <div
    class="widget-panel no-event-parent relative"
    :class="direction"
    @mouseenter="enter"
    @mouseleave="leave"
  >
    <div
      class="widget-panel-title title-2 no-select flex align-center color-white"
      :style="{ width: titleWidth }"
      v-show="showTitle"
    >
      <span :class="icon" />{{ title }} <slot name="title"></slot>
    </div>
    <transition name="el-fade-in-linear">
      <div
        v-if="listShow && moreShow"
        class="absolute color-white pointer"
        style="top: 4px"
        :style="direction.indexOf('left') > -1 ? 'right:0' : 'left:0'"
        @click="$emit('showList')"
        title="更多"
      >
        <i class="el-icon-s-grid title-1"></i>
      </div>
    </transition>

    <slot />
  </div>
</template>

<script>
export default {
  name: "WidgetPanel",
  props: {
    title: {
      type: String,
      default: "标题",
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: String,
      default: "el-icon-setting",
    },
    direction: {
      type: String,
      default: "left",
    },
    titleWidth: {
      type: String,
      default: "350px",
    },
    moreShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      listShow: false,
      timer: null,
    };
  },
  methods: {
    enter() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.listShow = true;
    },
    leave() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.listShow = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/backgrounds.scss";
.widget-panel {
  margin-bottom: 25px;
  display: flex;
  //   width: 430px;
  //   height: 49%;
  //   width: min-content;
  flex-direction: column;
  &.right {
    align-items: flex-end;
  }
  .widget-panel-title {
    padding: 6px 8px;
    width: 350px;
    // margin-bottom: 18px;
    margin-bottom: 12px;
    span {
      font-size: 20px;
    }
  }
  &.left .widget-panel-title {
    background: linear-gradient(
      90deg,
      $background-black 0,
      rgba(0, 0, 0, 0) 0.65
    );
    span {
      margin-right: 8px;
    }
  }
  &.right .widget-panel-title {
    flex-direction: row-reverse;
    background: linear-gradient(
      -90deg,
      $background-black 0,
      rgba(0, 0, 0, 0) 0.65
    );
    span {
      margin-left: 8px;
    }
  }
}
.max-content {
  width: max-content;
}
</style>
